<template>
  <div class="conference-detail" :class="{ 'mobile-view': isMobile }">
    <el-card class="main-card">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-button 
              class="back-button" 
              @click="goBack"
              type="default"
              plain
            >
              <el-icon><ArrowLeft /></el-icon>
              返回列表
            </el-button>
            <div class="title-section">
              <h1 class="page-title">会议详情</h1>
              <el-tag class="status-tag" :type="getStatusType(conference.status)">
                {{ getStatusText(conference.status) }}
              </el-tag>
            </div>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="handleAddVenue">
              <el-icon><Plus /></el-icon>
              添加场地
            </el-button>
            <el-button type="success" @click="handleAddSchedule">
              <el-icon><Calendar /></el-icon>
              添加日程
            </el-button>
          </div>
        </div>
      </template>

      <!-- 会议基本信息 -->
      <div class="detail-container">
        <div class="conference-header">
          <h2 class="conference-title">{{ conference.title }}</h2>
        </div>

        <div class="info-section">
          <div class="info-card">
            <div class="info-item">
              <el-icon class="info-icon"><Location /></el-icon>
              <div class="info-content">
                <span class="info-label">会议地点</span>
                <span class="info-value">{{ conference.location }}</span>
              </div>
            </div>
            <div class="info-item">
              <el-icon class="info-icon"><Timer /></el-icon>
              <div class="info-content">
                <span class="info-label">开始时间</span>
                <span class="info-value">{{ formatDateTime(conference.startTime) }}</span>
              </div>
            </div>
            <div class="info-item">
              <el-icon class="info-icon"><Timer /></el-icon>
              <div class="info-content">
                <span class="info-label">结束时间</span>
                <span class="info-value">{{ formatDateTime(conference.endTime) }}</span>
              </div>
            </div>
            <div class="info-item">
              <el-icon class="info-icon"><User /></el-icon>
              <div class="info-content">
                <span class="info-label">发布人</span>
                <span class="info-value publisher-value">
                  <el-tag size="small" effect="plain" type="info">
                    {{ conference.conferencePublisher || '未设置' }}
                  </el-tag>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 描述 -->
        <div class="description-section">
          <h3 class="section-title">会议描述</h3>
          <div class="description-content">
            {{ conference.description || '暂无描述' }}
          </div>
        </div>
      </div>

      <!-- 场地管理 -->
      <div class="section-container">
        <h3 class="section-title">场地管理</h3>
        <el-table 
          :data="venues" 
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column prop="venueName" label="场地名称" min-width="200"/>
          <el-table-column prop="capacity" label="容纳人数" width="150"/>
          <el-table-column label="操作" width="280" fixed="right">
            <template #default="scope">
              <div class="table-actions">
                <el-button 
                  size="small" 
                  type="success" 
                  plain
                  @click="handleViewSeats(scope.row)"
                >
                  座位详情
                </el-button>
                <el-button 
                  size="small" 
                  type="primary" 
                  plain
                  @click="handleEditVenue(scope.row)"
                >
                  编辑
                </el-button>
                <el-button 
                  size="small" 
                  type="danger" 
                  plain
                  @click="handleDeleteVenue(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 日程管理 -->
      <div class="section-container">
        <h3 class="section-title">日程管理</h3>
        <el-table 
          :data="schedules" 
          style="width: 100%"
          class="custom-table"
          :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column prop="title" label="日程标题" min-width="180"/>
          <el-table-column label="场地" min-width="150">
            <template #default="scope">
              {{ getVenueName(scope.row.venueId) }}
            </template>
          </el-table-column>
          <el-table-column label="时间信息" min-width="280">
            <template #default="scope">
              <div class="time-info">
                <div class="time-row">
                  <span class="time-label">开始：</span>
                  <span>{{ formatDateTime(scope.row.startTime) }}</span>
                </div>
                <div class="time-row">
                  <span class="time-label">结束：</span>
                  <span>{{ formatDateTime(scope.row.endTime) }}</span>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="speaker" label="主讲人" min-width="120"/>
          <el-table-column label="操作" width="200" fixed="right">
            <template #default="scope">
              <div class="table-actions">
                <el-button 
                  size="small" 
                  type="primary" 
                  plain
                  @click="handleEditSchedule(scope.row)"
                >
                  编辑
                </el-button>
                <el-button 
                  size="small" 
                  type="danger" 
                  plain
                  @click="handleDeleteSchedule(scope.row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 场地表单对话框 -->
    <el-dialog
      :title="venueDialogTitle"
      v-model="venueDialogVisible"
      width="50%"
    >
      <el-form :model="venueForm" label-width="100px">
        <el-form-item label="场地名称" required>
          <el-input v-model="venueForm.venueName" />
        </el-form-item>
        <el-form-item label="容纳人数" required>
          <el-input-number v-model="venueForm.capacity" :min="1" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="venueDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitVenue">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 日程表单对话框 -->
    <el-dialog
      :title="scheduleDialogTitle"
      v-model="scheduleDialogVisible"
      width="50%"
    >
      <el-form :model="scheduleForm" label-width="100px">
        <el-form-item label="日程标题" required>
          <el-input v-model="scheduleForm.title" />
        </el-form-item>
        <el-form-item label="场地" required>
          <el-select 
            v-model="scheduleForm.venueId" 
            placeholder="请选择场地"
            style="width: 100%"
          >
            <el-option
              v-for="venue in venues"
              :key="venue.id"
              :label="venue.venueName"
              :value="venue.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" required>
          <el-date-picker
            v-model="scheduleForm.startTime"
            type="datetime"
            placeholder="选择开始时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="结束时间" required>
          <el-date-picker
            v-model="scheduleForm.endTime"
            type="datetime"
            placeholder="选择结束时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="主讲人">
          <el-input v-model="scheduleForm.speaker" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="scheduleForm.description"
            type="textarea"
            :rows="4"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="scheduleDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmitSchedule">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加座位布局对话框 -->
    <el-dialog
      title="座位安排表"
      v-model="seatLayoutDialogVisible"
      width="90%"
      :close-on-click-modal="false"
    >
      <div class="seat-layout-container">
        <div class="layout-header">
          <el-button 
            type="primary" 
            @click="handleImportSeats"
            :loading="importing"
          >
            <el-icon><Upload /></el-icon>
            一键导入参会人员
          </el-button>
        </div>
        <div class="stage-area">主讲台</div>
        <div class="seat-grid">
          <div v-for="row in 16" :key="row" class="seat-row">
            <div class="row-label">第{{ row }}排</div>
            <template v-for="col in 12" :key="col">
              <div 
                v-if="!isAisle(col)" 
                class="seat"
                :class="{ 'occupied': getSeatOccupant(row, col) }"
                @click="handleSeatClick(row, col)"
                :title="getSeatTooltip(row, col)"
              >
                {{ getSeatOccupant(row, col) || '空座' }}
              </div>
              <div v-else class="aisle">过道</div>
            </template>
            <div class="row-label">第{{ row }}排</div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="seatLayoutDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveLayout">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 添加座位编辑对话框 -->
    <el-dialog
      title="编辑座位"
      v-model="seatEditDialogVisible"
      width="30%"
    >
      <el-form :model="seatForm" label-width="100px">
        <el-form-item label="参会人姓名" required>
          <el-input v-model="seatForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="手机号码" required>
          <el-input v-model="seatForm.phone" placeholder="请输入手机号码" />
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="seatForm.email" placeholder="请输入邮箱" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClearSeat">清除</el-button>
          <el-button @click="seatEditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveSeat">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { 
  Location, 
  Timer,
  ArrowLeft,
  Plus,
  Calendar,
  User,
  Upload
} from '@element-plus/icons-vue'
import request from "@/utils/request";

export default {
  name: 'ConferenceDetail',
  components: {
    Location,
    Timer,
    ArrowLeft,
    Plus,
    Calendar,
    User,
    Upload
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const conference = ref({})
    const venues = ref([])
    const schedules = ref([])
    const isMobile = ref(false)

    const venueDialogVisible = ref(false)
    const venueDialogTitle = ref('')
    const scheduleDialogVisible = ref(false)
    const scheduleDialogTitle = ref('')

    const venueForm = ref({
      id: null,
      conferenceId: route.params.id,
      venueName: '',
      capacity: 1
    })

    const scheduleForm = ref({
      id: null,
      conferenceId: route.params.id,
      venueId: null,
      title: '',
      startTime: '',
      endTime: '',
      speaker: '',
      description: ''
    })

    const seatLayoutDialogVisible = ref(false)
    const seatEditDialogVisible = ref(false)
    const currentVenue = ref(null)
    const seatLayout = ref({
      rows: [],
    })
    const seatForm = ref({
      name: '',
      phone: '',
      email: '',
      row: null,
      col: null
    })

    const importing = ref(false)

    const fetchConferenceDetail = async () => {
      try {
        const response = await request(`/api/conferences/${route.params.id}`, { method: 'GET' })
        conference.value = response
      } catch (error) {
        ElMessage.error('获取会议详情失败')
      }
    }

    const fetchVenues = async () => {
      try {
        const response = await request(`/api/conferences/${route.params.id}/venues`, { method: 'GET' })
        venues.value = response
      } catch (error) {
        ElMessage.error('获取场地列表失败')
      }
    }

    const fetchSchedules = async () => {
      try {
        const response = await request(`/api/conferences/${route.params.id}/schedules`, { method: 'GET' })
        schedules.value = response
        if (venues.value.length === 0) {
          await fetchVenues()
        }
      } catch (error) {
        ElMessage.error('获取日程列表失败')
      }
    }

    const handleAddVenue = () => {
      venueDialogTitle.value = '添加场地'
      venueForm.value = {
        id: null,
        conferenceId: route.params.id,
        venueName: '',
        capacity: 1
      }
      venueDialogVisible.value = true
    }

    const handleEditVenue = (row) => {
      venueDialogTitle.value = '编辑场地'
      venueForm.value = { ...row }
      venueDialogVisible.value = true
    }

    const handleDeleteVenue = (row) => {
      ElMessageBox.confirm('确定要删除该场地吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await axios.delete(`/api/conferences/${route.params.id}/venues/${row.id}`)
          ElMessage.success('删除成功')
          fetchVenues()
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
    }

    const handleSubmitVenue = async () => {
      try {
        if (venueForm.value.id) {
          await axios.put(`/api/conferences/${route.params.id}/venues/${venueForm.value.id}`, venueForm.value)
          ElMessage.success('更新成功')
        } else {
          await axios.post(`/api/conferences/${route.params.id}/venues`, venueForm.value)
          ElMessage.success('创建成功')
        }
        venueDialogVisible.value = false
        fetchVenues()
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }

    const handleAddSchedule = () => {
      scheduleDialogTitle.value = '添加日程'
      scheduleForm.value = {
        id: null,
        conferenceId: route.params.id,
        venueId: null,
        title: '',
        startTime: '',
        endTime: '',
        speaker: '',
        description: ''
      }
      scheduleDialogVisible.value = true
    }

    const handleEditSchedule = (row) => {
      scheduleDialogTitle.value = '编辑日程'
      scheduleForm.value = { ...row }
      scheduleDialogVisible.value = true
    }

    const handleDeleteSchedule = (row) => {
      ElMessageBox.confirm('确定要删除该日程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await axios.delete(`/api/conferences/${route.params.id}/schedules/${row.id}`)
          ElMessage.success('删除成功')
          fetchSchedules()
        } catch (error) {
          ElMessage.error('删除失败')
        }
      })
    }

    const handleSubmitSchedule = async () => {
      try {
        if (scheduleForm.value.id) {
          await axios.put(`/api/conferences/${route.params.id}/schedules/${scheduleForm.value.id}`, scheduleForm.value)
          ElMessage.success('更新成功')
        } else {
          await axios.post(`/api/conferences/${route.params.id}/schedules`, scheduleForm.value)
          ElMessage.success('创建成功')
        }
        scheduleDialogVisible.value = false
        fetchSchedules()
      } catch (error) {
        ElMessage.error('操作失败')
      }
    }

    const formatDateTime = (dateTime) => {
      return new Date(dateTime).toLocaleString()
    }

    const getStatusType = (status) => {
      switch (status) {
        case 0: return 'info'
        case 1: return 'success'
        case 2: return 'warning'
        default: return 'info'
      }
    }

    const getStatusText = (status) => {
      switch (status) {
        case 0: return '未发布'
        case 1: return '已发布'
        case 2: return '已结束'
        default: return '未知'
      }
    }

    const goBack = () => {
      router.push('/conferences')
    }

    const getVenueName = (venueId) => {
      const venue = venues.value.find(v => v.id === venueId)
      return venue ? venue.venueName : '未分配场地'
    }

    const initializeSeatLayout = (venue) => {
      if (venue.layoutData) {
        try {
          seatLayout.value = JSON.parse(venue.layoutData)
        } catch (e) {
          seatLayout.value = { rows: [] }
        }
      } else {
        seatLayout.value = { rows: [] }
      }
    }

    const handleViewSeats = async (venue) => {
      currentVenue.value = venue
      seatLayoutDialogVisible.value = true
      // 打开座位详情时获取最新数据
      await fetchSeatLayout()
    }

    const isAisle = (col) => {
      // 第6列和第7列之间是过道
      return col === 6 || col === 7
    }

    const getSeatOccupant = (row, col) => {
      const rowData = seatLayout.value.rows.find(r => r.row === row)
      if (rowData) {
        const seat = rowData.seats.find(s => s.col === col)
        return seat ? seat.name : ''
      }
      return ''
    }

    const getSeatTooltip = (row, col) => {
      const rowData = seatLayout.value.rows.find(r => r.row === row)
      if (rowData) {
        const seat = rowData.seats.find(s => s.col === col)
        if (seat) {
          let tooltip = `姓名: ${seat.name}`
          if (seat.phone) tooltip += `\n电话: ${seat.phone}`
          if (seat.email) tooltip += `\n邮箱: ${seat.email}`
          return tooltip
        }
      }
      return '空座'
    }

    const handleSeatClick = (row, col) => {
      if (isAisle(col)) return
      const rowData = seatLayout.value.rows.find(r => r.row === row)
      const seat = rowData?.seats.find(s => s.col === col)
      seatForm.value = {
        name: seat?.name || '',
        phone: seat?.phone || '',
        email: seat?.email || '',
        row,
        col
      }
      seatEditDialogVisible.value = true
    }

    const fetchSeatLayout = async () => {
      try {
        const response = await request({
          url: `/api/conferences/${conference.value.id}/venues/${currentVenue.value.id}/import-seats`,
          method: 'GET'
        })
        
        if (response && Array.isArray(response)) {
          // 更新座位布局数据
          const importedLayout = {
            rows: []
          }
          
          // 将导入的数据转换为座位布局格式
          response.forEach(user => {
            let rowData = importedLayout.rows.find(r => r.row === user.rowNum)
            if (!rowData) {
              rowData = { row: user.rowNum, seats: [] }
              importedLayout.rows.push(rowData)
            }
            
            // 检查是否已存在相同位置的座位
            const existingSeat = rowData.seats.find(s => s.col === user.seatNum)
            if (!existingSeat) {
              rowData.seats.push({
                col: user.seatNum,
                name: user.name,
                phone: user.phone,
                email: user.email
              })
            }
          })
          
          // 按行号排序
          importedLayout.rows.sort((a, b) => a.row - b.row)
          // 对每行的座位按列号排序
          importedLayout.rows.forEach(row => {
            row.seats.sort((a, b) => a.col - b.col)
          })
          
          // 更新当前布局
          seatLayout.value = importedLayout
          
          // 计算总座位数
          const totalSeats = importedLayout.rows.reduce((total, row) => total + row.seats.length, 0)
          currentVenue.value.capacity = totalSeats
        }
      } catch (error) {
        console.error('获取座位布局失败:', error)
        ElMessage.error('获取座位布局失败')
      }
    }

    const handleSaveSeat = async () => {
      if (!seatForm.value.name || !seatForm.value.phone) {
        ElMessage.warning('姓名和手机号码为必填项')
        return
      }
      
      try {
        const { row, col, name, phone, email } = seatForm.value
        
        // 更新后端数据
        const response = await request({
          url: `/api/conferences/${conference.value.id}/venues/${currentVenue.value.id}/seats`,
          method: 'PUT',
          data: {
            rowNum: row,
            seatNum: col,
            name,
            phone,
            email
          }
        })
        
        if (response) {
          // 重新获取最新的座位布局
          await fetchSeatLayout()
          
          ElMessage.success('座位信息保存成功')
          seatEditDialogVisible.value = false
        }
      } catch (error) {
        console.error('保存座位信息失败:', error)
        ElMessage.error(error.response?.data || '保存座位信息失败')
      }
    }

    const handleClearSeat = async () => {
      try {
        const { row, col } = seatForm.value
        
        // 删除后端数据
        await request({
          url: `/api/conferences/${conference.value.id}/venues/${currentVenue.value.id}/seats`,
          method: 'DELETE',
          params: {
            rowNum: row,
            seatNum: col
          }
        })
        
        // 重新获取最新的座位布局
        await fetchSeatLayout()
        
        ElMessage.success('座位信息清除成功')
        seatEditDialogVisible.value = false
      } catch (error) {
        console.error('清除座位信息失败:', error)
        ElMessage.error(error.response?.data || '清除座位信息失败')
      }
    }

    const handleSaveLayout = async () => {
      try {
        // 计算总座位数
        const totalSeats = seatLayout.value.rows.reduce((total, row) => total + row.seats.length, 0)
        
        // 更新场地容量
        currentVenue.value.capacity = totalSeats
        
        const layoutData = JSON.stringify(seatLayout.value)
        await request({
          url: `/api/conferences/${route.params.id}/venues/${currentVenue.value.id}`,
          method: 'PUT',
          data: {
            ...currentVenue.value,
            layoutData,
            capacity: totalSeats
          }
        })
        
        ElMessage.success('座位布局保存成功')
        // 重新获取场地列表以更新UI显示
        await fetchVenues()
      } catch (error) {
        ElMessage.error('保存失败')
      }
    }

    const handleImportSeats = async () => {
      try {
        importing.value = true
        // 直接使用fetchSeatLayout获取最新数据
        await fetchSeatLayout()
        
        // 保存布局和更新后的容量
        try {
          const layoutData = JSON.stringify(seatLayout.value)
          await request({
            url: `/api/conferences/${conference.value.id}/venues/${currentVenue.value.id}`,
            method: 'PUT',
            data: {
              ...currentVenue.value,
              layoutData,
              capacity: currentVenue.value.capacity
            }
          })
          
          ElMessage.success('参会人员座位导入成功')
          // 重新获取场地列表以更新UI显示
          await fetchVenues()
        } catch (error) {
          ElMessage.error('保存座位布局失败')
          throw error
        }
      } catch (error) {
        console.error('导入座位数据失败:', error)
        ElMessage.error(error.response?.data?.message || error.message || '导入失败，请检查API接口')
      } finally {
        importing.value = false
      }
    }

    onMounted(() => {
      isMobile.value = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
      fetchConferenceDetail()
      fetchVenues()
      fetchSchedules()
    })

    return {
      conference,
      venues,
      schedules,
      isMobile,
      venueDialogVisible,
      venueDialogTitle,
      scheduleDialogVisible,
      scheduleDialogTitle,
      venueForm,
      scheduleForm,
      seatLayoutDialogVisible,
      seatEditDialogVisible,
      seatForm,
      handleAddVenue,
      handleEditVenue,
      handleDeleteVenue,
      handleSubmitVenue,
      handleAddSchedule,
      handleEditSchedule,
      handleDeleteSchedule,
      handleSubmitSchedule,
      formatDateTime,
      getStatusType,
      getStatusText,
      goBack,
      getVenueName,
      handleViewSeats,
      isAisle,
      getSeatOccupant,
      getSeatTooltip,
      handleSeatClick,
      handleSaveSeat,
      handleClearSeat,
      handleSaveLayout,
      importing,
      handleImportSeats
    }
  }
}
</script>

<style scoped>
.conference-detail {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
  background: #f5f7fa;
  min-height: 100vh;
}

.main-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.title-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
}

.status-tag {
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 4px;
}

.header-right {
  display: flex;
  gap: 12px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
  border-color: #dcdfe6;
}

.back-button:hover {
  color: #409EFF;
  border-color: #409EFF;
  background-color: #ecf5ff;
}

.detail-container {
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  margin-bottom: 24px;
}

.conference-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 24px 0;
}

.info-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info-icon {
  font-size: 20px;
  color: #409EFF;
  background: #ecf5ff;
  padding: 8px;
  border-radius: 8px;
}

.info-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.info-label {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.info-value {
  font-size: 15px;
  color: #2c3e50;
  font-weight: 500;
}

.publisher-value .el-tag {
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 4px;
}

.section-container {
  margin-top: 32px;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
  padding-left: 12px;
  border-left: 4px solid #409EFF;
}

.description-section {
  margin-top: 24px;
}

.description-content {
  color: #606266;
  line-height: 1.6;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  min-height: 60px;
}

.custom-table {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.table-actions {
  display: flex;
  gap: 8px;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.time-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-label {
  color: #909399;
  font-size: 13px;
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .conference-detail {
    padding: 12px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .header-right {
    width: 100%;
    justify-content: flex-end;
  }

  .info-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .info-item {
    padding: 10px;
  }

  .info-icon {
    font-size: 18px;
    padding: 6px;
  }

  .info-value {
    font-size: 14px;
  }

  .detail-container {
    padding: 16px;
  }

  .conference-title {
    font-size: 20px;
  }
}

.seat-layout-container {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.layout-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.layout-header .el-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stage-area {
  background: #e9ecef;
  text-align: center;
  padding: 20px;
  margin-bottom: 40px;
  border-radius: 8px;
  font-weight: bold;
  color: #495057;
}

.seat-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

.seat-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.row-label {
  min-width: 60px;
  text-align: center;
  color: #6c757d;
  font-size: 14px;
}

.seat {
  width: 80px;
  height: 40px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  transition: all 0.3s;
  font-size: 13px;
  color: #adb5bd;
}

.seat:hover {
  border-color: #409EFF;
  color: #409EFF;
}

.seat.occupied {
  background: #e6f3ff;
  border-color: #409EFF;
  color: #409EFF;
}

.aisle {
  width: 40px;
  text-align: center;
  color: #6c757d;
  font-size: 12px;
}
</style> 